/**
  data: 2019年6月17日04:04:49
  latest update: 2019年6月18日09:53:13
  author: liump
  desc: 总工作量展示表格,用于展示用户绘图后添加的所有工作量,使用按钮组分类可切换,表格下方保存按钮调用接口,保存数据.

 */
<template>
  <el-card class="amap-all-table">
    <el-tabs type="card">
      <el-tab-pane label="线路工作内容">
        <el-table border style="width: 100%" :data="lineTableData">
          <el-table-column fixed prop="line" label="线程/操作点" width="120" align="center"></el-table-column>
          <el-table-column prop="lnglat" label="经纬度" width="200" align="center"></el-table-column>
          <el-table-column prop="workMessage" label="工作内容" width="459" align="center"></el-table-column>
          <el-table-column prop="tableShowNum" label="数量" width="120" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="设备工作内容">
        <el-table border style="width: 100%" :data="equipmentTableData">
          <el-table-column fixed prop="line" label="操作点" width="140" align="center"></el-table-column>
          <el-table-column prop="lnglat" label="经纬度" width="240" align="center"></el-table-column>
          <el-table-column prop="workMessage" label="工作内容" width="399" align="center"></el-table-column>
          <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="熔纤工作内容">
        <el-table border style="width: 100%" :data="meltTableData">
          <el-table-column fixed prop="line" label="线程" width="120" align="center"></el-table-column>
          <el-table-column prop="equipment_point" label="设备点" width="200" align="center"></el-table-column>
          <el-table-column prop="workMessage" label="工作内容" width="459" align="center"></el-table-column>
          <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-button class="update" @click="handleUpdateData" type="primary" v-if="showUpdateBtn">保存</el-button>
  </el-card>
</template>

<script>
export default {
  name: 'amapAllTable',
  data() {
    return {
      lineTableData: [], // 线路工作内容的数组
      equipmentTableData: [], // 设备工作内容的数组
      meltTableData: [], // 熔纤工作内容的数组
      showUpdateBtn: true // 控制保存按钮,上传后隐藏
    }
  },
  methods: {
    /**
     *  将父组件的线路工作内容传递到子组件渲染
     * @method handleChoiceLine
     * @date 2019年6月17日04:24:49
     * @author liump
     * @param { Array } list 用于渲染线路工作内容的数组
     */
    handleChoiceLine(list) {
      this.lineTableData = list
    },
    /**
     * 将父组件的设备工作内容传递到子组件渲染
     * @method handleChoiceEquipment
     * @author liump
     * @param { Array } list 用于渲染设备工作内容的数组
     */
    handleChoiceEquipment(list) {
      this.equipmentTableData = list
    },
    /**
     *  将父组件的线路工作内容传递到子组件渲染
     * @method handleChoiceMelt
     * @date 2019年6月17日04:34:04
     * @author liump
     * @param { Array } list 用于渲染熔纤工作内容的数组
     */
    handleChoiceMelt(list) {
      this.meltTableData = list
    },
    /**
     * 保存数据方法
     * @method handleUpdateData
     * @date 2019年6月17日14:57:51
     * @author liump
     */
    handleUpdateData() {
      // 让 amap 组件上传数据
      this.$emit('handleUpdateData')
    },
    /**
     * 是否显示保存按钮的方法
     * @method handleShowUpdateBtn
     * @author liump
     * @date 2019年6月18日15:24:56
     * @param { Boolean } bool 参数用于隐藏按钮
     */
    handleShowUpdateBtn(bool) {
      this.showUpdateBtn = bool
    }
  }
}
</script>

<style scoped>
/* 容器外层 */
.amap-all-table {
  width: 1100px;
  margin: 20px auto 0;
}

/* 保存按钮 */
.update {
  margin-top: 20px;
}
</style>